<template>
  <div class="login">
    <van-nav-bar
      title="京东登录注册"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <main>
      <!-- 输入框field -->
      <van-cell-group>
        <!-- autofocus自动聚焦； -->
        <van-field
          v-model="telval"
          label="手机号"
          placeholder="请输入手机号"
          autofocus
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="mmval"
          :type="fla ? 'password' : 'text'"
          label="密码"
          placeholder="请输入密码.."
          :right-icon="fla ? 'closed-eye' : 'eye-o'"
          @click-right-icon="fla = !fla"
        />
        <!-- closed-eye -->
      </van-cell-group>
      <div class="loginbtn">
        <van-button type="danger" round block @click="login" :disabled="flag"
          >登录</van-button
        >
        <router-link to="/register">去注册</router-link>
      </div>
    </main>
  </div>
</template>
<script>
import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);
import { GoLogin } from "@/request/api";
export default {
  data() {
    return {
      telval: "",
      mmval: "",
      fla: true,
    };
  },
  computed: {
    flag() {
      if (
        /^(?:(?:\+|00)86)?1\d{10}$/.test(this.telval) &&
        /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])\S*$/.test(this.mmval)
      ) {
        //输入的内容符合正则规则
        return false; // 显示的红色可用
      } else {
        return true; //灰红色 禁用
      }
    },
  },
  created() {
    let userTel = localStorage.getItem("tel");
    if (userTel) {
      this.telval = userTel;
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    login() {
      //   注册15117136424存密码：Sj12345
      GoLogin({
        loginname: this.telval,
        password: this.mmval,
      }).then((res) => {
        console.log(res.data.code);
        if (res.data.code == 10010) {
          Toast("该用户不存在");
        } else if (res.data.code == 10011) {
          Toast("密码错误");
        } else if (res.data.code == 200) {
          console.log(res);
          localStorage.setItem("token", res.data.data.token);
          localStorage.setItem("userid", res.data.data.userid);
          // token.id是后端给你的做 购物车的时候要用，很重要
           this.$router.push("/");
       
        }
      });
    },
  },
};
</script>
<style scoped>
.loginbtn {
  width: 80%;
  margin: 10px auto;
}
</style>